<template>
  <div class="app-container  course course-detail">
    <div class="edit-title-line">基本信息</div>
    <div>
      <div class="ele-form-item">
        <div class="ele-form-label">标题：</div>
        <div class="ele-form-content">{{courseDetail.title || null}}</div>
      </div>
    </div>
    <div>
      <div class="ele-form-item">
        <div class="ele-form-label">类型：</div>
        <div class="ele-form-content">{{formatCourseType(courseDetail.type)}}</div>
      </div>
    </div>
    <div>
      <div class="ele-form-item">
        <div class="ele-form-label">学科：</div>
        <div class="ele-form-content">{{courseDetail.subject}}</div>
      </div>
    </div>
    <div>
      <div class="ele-form-item">
        <div class="ele-form-label">年级：</div>
        <div class="ele-form-content">{{courseDetail.grade}}</div>
      </div>
    </div>
    <div>
      <div class="ele-form-item">
        <div class="ele-form-label">班级：</div>
        <div class="ele-form-content">{{courseDetail.classStr}}</div>
      </div>
    </div>
    <div class="edit-title-line">附件</div>
    <!--附件列表-->
    <div class="course-detail-annex-list">
     <template v-if="courseDetail.annexList != undefined && courseDetail.annexList.length >0">
       <div class="annex-list-item" v-for="(item, index) in courseDetail.annexList">
         <div class="annex-list-item-index">{{index+1}}</div>
         <div class="annex-list-item-annexName">{{item.fileName}}</div>
         <div class="annex-list-item-download" @click="downloadAnnex(item.filePath, item.fileName)">下载</div>
       </div>
     </template>

      <template v-else>
        <div >暂无附件！</div>
      </template>
    </div>
    <!--附件列表结束-->
    <div class="edit-title-line">备课内容</div>
    <!--备课内容-->
      <template v-if="courseDetail.prepareLessons">
        <div v-html="courseDetail.prepareLessons"></div>
      </template>
      <template v-else>
        <div class="no-content">暂无备课内容！</div>
      </template>
    <!--备课内容结束-->
    <div class="edit-title-line postscript">
      <span>教学后记</span>
      <template v-if="courseDetail.postscript">
        <span class="postscript-edit" @click="$router.push({path: '/postscript/postscriptEdit', query:{lessonId: courseDetail.id, postscriptId: courseDetail.postscriptId}})">编辑后记</span>
      </template>
      <template v-else>
        <span class="postscript-edit" v-if="courseDetail.createBy == userInfo.id" @click="$router.push({path: '/postscript/postscriptAdd', query:{courseId: courseDetail.id}})">新增后记</span>
      </template>
    </div>
    <!--教学后记-->
    <template v-if="courseDetail.postscript">
      <div v-html="courseDetail.postscript"></div>
    </template>
    <template v-else>
      <div class="no-content">暂无后记内容！</div>
    </template>
    <!--教学后记结束-->


    <!--评论-->
    <div class="edit-title-line">评论</div>

    <template v-if="courseDetail.commentList && courseDetail.commentList.length > 0">
      <div class="course-detail-comment">
        <div class="course-detail-comment-list">
          <div class="course-detail-comment-item" v-for="(commentItem, index) in courseDetail.commentList" :key="index">
            <div class="course-detail-comment-item-desc">
              <div class="course-detail-comment-item-desc-left">
                <span class="course-detail-comment-item-desc-left-title">{{commentItem.createName}}</span>
                <span class="course-detail-comment-item-desc-left-time">{{commentItem.updateAt}}</span>
              </div>
              <div class="course-detail-comment-item-desc-buttons" v-show="commentItem.createBy === userInfo.id">
                <template v-if="permissions.indexOf('pl:comment:operating') !== -1">
                  <span class="course-detail-comment-item-desc-buttons-edit" @click="handleClickEditComment(commentItem)">编辑</span>
                  <span class="course-detail-comment-item-desc-buttons-delete" @click="handleClickDeleteComment(commentItem)">删除</span>
                </template>
              </div>
            </div>
            <div class="course-detail-comment-item-commentDetail">
             {{commentItem.content}}
            </div>
          </div>
          <div class="course-detail-comment-item un-bottom-line">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageInfo.pageNum"
              :page-sizes="[5, 10, 30 ,50]"
              :page-size="pageInfo.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageInfo.total">
            </el-pagination>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="no-content">暂无评论！</div>
    </template>
    <!--评论结束-->

    <!--发表评论-->
    <div class="publish-comment" v-if="userInfo.id != courseDetail.createBy">
      <el-input type="textarea" placeholder="发表一下你的意见吧！"
                rows="8"
                maxlength="300"
                size="medium"
                show-word-limit
                v-model="commentForm.commentDetail"
                ref = "comment"
                >
      </el-input>
      <template v-if="permissions.indexOf('pl:comment:operating') !== -1">

          <div class="publish-comment-btn">
          <template v-if = "showSubmitBtn" >
            <el-button slot="trigger" size="small" type="primary" @click="handleSubmitComment">发布评论</el-button>
          </template>
          <template v-else>
            <el-button  style="margin-left: 20px" slot="trigger" size="small" type="primary" @click="handleClickCancel()">取消</el-button>
            <el-button slot="trigger" size="small" type="primary" @click="handleSubmitEdit()">确定</el-button>
          </template>
        </div>
      </template>
    </div>
    <!--发表评论结束-->
    <!--<el-button slot="trigger"  size="small" type="primary" @click="$router.go(-1)" >返回</el-button>-->
    <el-confirm-dialog
      elTip="确定要删除当前评论吗？"
      :showDialog="cancelConfirm"
      :confirmSubmit="elConfirmDialogSubmit"
      :confirmCancel="elConfirmDialogCancel"
      @closeDialog = "elConfirmDialogClose"
    >
    </el-confirm-dialog>
  </div>
</template>

<script>
  import ElConfirmDialog from '@/components/ElConfirmDialog/index.vue'
  import EditorBar from '@/components/wangEditor/index'
  import {getPlLessonDetail, getCommentList, saveOrUpdateComment, deleteComment}  from '@/api/api.js'
  import {mapGetters} from 'vuex'
  import {download} from '@/lib/download.js'
  export default {
        name: "schoolCourseDetail",
        components: {
          EditorBar,
          ElConfirmDialog
        },
      computed: {
        ...mapGetters([
          'permissions','userInfo'
        ]),
      },
        data () {
          return {
            cancelConfirm : false,
            //备课类型
            courseTypeData: [
              {code: 1, label: "教案"},
              {code: 2, label: "单元测试分析"},
              {code: 3, label: "单元教学分析"},
              {code: 4, label: "教学计划及进度"},
            ],
            plLessonId: '',
            pageInfo: {
              pageNum: 1,
              pageSize: 5,
              total: 0
            },
            showSubmitBtn : true,
            //备课详情
            courseDetail: {
              id: '',//备课Id
              createBy: '',
              classStr: '',
              //附件列表
              annexList:[],
              prepareLessons: '', //备课内容,
              postscriptId: '', // 后记Id
              postscript: '', //后记内容
              commentList: [], //评论
            },
            //评论表单
            commentForm:{
              commentId : '',
              commentDetail : ''
            },
            currentComment: {}
          }
        },
      methods: {
       //格式化备课类型
        formatCourseType(code) {
          for (let item of this.courseTypeList) {
            if (item.code === code ) {
              return item.label;
            }
          }
          return "";
        },
        //格式化班级
        formatClassList(classList) {
          if (classList && classList instanceof  Array) {
           classList.forEach(item => this.courseDetail.classStr = this.courseDetail.classStr + item.classCode + "班， ")
            let index = this.courseDetail.classStr.length - 2; //有一个空格
            this.courseDetail.classStr =  this.courseDetail.classStr.slice(0 , index)
          } else {
            this.courseDetail.classStr = ""
          }

        },
        downloadAnnex(url, name) {
          if(!url) {
            return
          }
          download(url, null, null, name)
        },
        //评论分页相关
        handleSizeChange(val) {
          this.pageInfo.pageSize = val
          this.getCommentList()
        },
        handleCurrentChange(val) {
          this.pageInfo.pageNum = val
          this.getCommentList()
        },
       // 评论分页相关结束

        /**  初始化 **/
        getPlLessonDetail() {
          let params = {
            plLessonId :  this.plLessonId
          }
          getPlLessonDetail(params).then(res => {
            if (res.code == 200) {
              if(res.result) {
                this.courseDetail.id = res.result.id
                this.courseDetail.title = res.result.title
                this.courseDetail.type = res.result.type
                this.courseDetail.schoolYear = res.result.schoolYear
                this.courseDetail.subjectId = res.result.subjectId || null
                this.courseDetail.subjectCode = res.result.subjectCode  || null
                this.courseDetail.subjectType = res.result.subjectType  || null
                this.courseDetail.subjectLevel = res.result.subjectLevel  || null
                this.courseDetail.semesterId = res.result.semesterId || null
                this.courseDetail.subject = res.result.subjectName
                this.courseDetail.annexList = res.result.anndexList || []
                this.courseDetail.createBy = res.result.createBy
                this.courseDetail.prepareLessons = res.result.content || null
                this.formatClassList(res.result.classList)
                this.courseDetail.grade =  (res.result && res.result.classList && res.result.classList[0]) ? res.result.classList[0].gradeName : ''
                this.courseDetail.postscript = ( res.result.plPostscript && res.result.plPostscript.content ) ?  res.result.plPostscript.content : null
                this.courseDetail.postscriptId = (res.result.plPostscript && res.result.plPostscript.id) ?  res.result.plPostscript.id : null
              }
            } else {
              this.$alert("获取备课详情失败！" + res.message, "错误", {type : "error"})
            }
          })
        },
        getCommentList() {
          let parmas = {
             schoolId : sessionStorage.getItem("schoolId"),
              lessonId :  this.plLessonId,
              pageNum : this.pageInfo.pageNum,
              pageSize : this.pageInfo.pageSize,
          }
          getCommentList(parmas).then(res => {
            if (res.code == 200) {
              this.courseDetail.commentList = []
              if (res.result && res.result.list && Array.isArray(res.result.list)) {
                  this.courseDetail.commentList = res.result.list
                }
                this.pageInfo.total = res.result.total
            } else {
              this.$alert("获取评论信息失败！" + res.message, "错误", {type : "error"})
            }
          })
        },
        formatCourseType(code) {
          for (let item of this.courseTypeData) {
            if (item.code == code) {
              return item.label
            }
          }
          return null
        },
        //格式化学年
        formatSchoolYear(schoolYear, schoolTerm) {
          let year = parseInt(schoolYear) + parseInt(1)
          let term = schoolTerm == 1 ? "第1学期" : "第2学期"
          return `${schoolYear}-${year}${term}`
        },
        /**  评论相关 **/
        //点击评论按钮
        handleClickEditComment(comment) {
          this.showSubmitBtn = false;
          this.commentForm.commentDetail = comment.content
          this.commentForm.commentId = comment.id
          this.$nextTick(() => {
            this.$refs.comment.focus()
          })
        },
        handleClickDeleteComment(comment) {
          this.currentComment = comment
          this.cancelConfirm = true
        },
        handleSubmitComment() {
          let params  = {
            lessonId : this.plLessonId,
            content : this.commentForm.commentDetail,
          }
          saveOrUpdateComment(params).then(res => {
            if (res.code == 200) {
              this.$alert("评论发表成功！", "提示", { type : "success" })
              this.getCommentList()
              this.commentForm.commentDetail = ''
              this.commentForm.commentId = ''
            } else {
              this.$alert("评论发表失败！" + res.message, "错误", {type : "error"})
            }
          })
        },
        handleClickCancel() {
          this.showSubmitBtn = true
          this.commentForm.commentDetail = ''
        },
        handleSubmitEdit() {
          let params = {
            id : this.commentForm.commentId,
            lessonId :  this.plLessonId,
            content : this.commentForm.commentDetail
          }
          saveOrUpdateComment(params).then(res => {
            if (res.code == 200) {
              this.showSubmitBtn = true
              this.$alert("修改成功！", "提示", { type : "success" })
              this.commentForm.commentDetail = ''
              this.getCommentList()
            } else {
              this.$alert("修改评论信息失败！" + res.message, "错误", {type : "error"})
            }
          })
        },

        // handleScroll () {
        //   let top = document.body.clientHeight  || document.body.scrollTop;
        //   document.body.scrollTop = top
        //   console.log(top)
        // }
        /**  评论相关结束 **/

        /** 取消询问框相关**/
        elConfirmDialogSubmit() {
          this.cancelConfirm = false
          let params  = {
            id : this.currentComment.id
          }
          deleteComment(params).then(res => {
            if (res.code == 200) {
              this.$alert("删除评论成功！", "提示", { type : "success" })
              this.getCommentList();
            } else {
              this.$alert("评论删除失败！" + res.message, "错误", {type : "error"})
            }
          })
        },
        elConfirmDialogCancel() {
          this.cancelConfirm = false
        },
        elConfirmDialogClose() {
          this.cancelConfirm = false
        },
        /** 取消询问框相关结束**/
      },
      // mounted() {
      //   window.addEventListener("scroll", this.handleScroll, true);
      // },
      mounted () {

      },
      created () {
        this.plLessonId = this.$route.query.id
        this.getPlLessonDetail()
        this.getCommentList()
      },
    }
</script>

<style scoped>
</style>
